<template>
  <div @dragstart="dragStart">
    <div class="card" @contextmenu="rightClick">
      <h4>基础用法</h4>
      <div class="content">
        <InputNumber :max="10" :min="1" :value="1"></InputNumber>
      </div>
    </div>
    <div class="card" @contextmenu="rightClick">
      <h4>小数</h4>
      <div class="content">
        <InputNumber :max="10" :min="1" :step="1.2" :value="1"></InputNumber>
      </div>
    </div>
    <div class="card" @contextmenu="rightClick">
      <h4>尺寸</h4>
      <div class="content">
        <InputNumber :value="1" size="small"></InputNumber>
        <InputNumber :value="1"></InputNumber>
        <InputNumber :value="1" size="large"></InputNumber>
      </div>
    </div>
    <div class="card" @contextmenu="rightClick">
      <h4>不可用</h4>
      <div class="content">
        <InputNumber :value="1" :disabled="true"></InputNumber>
      </div>
    </div>
    <div class="card" @contextmenu="rightClick">
      <h4>只读</h4>
      <div class="content">
        <InputNumber :value="1" readonly></InputNumber>
      </div>
    </div>
    <div class="card" @contextmenu="rightClick">
      <h4>可以编辑</h4>
      <div class="content">
        <InputNumber :value="1" :editable="true"></InputNumber>
      </div>
    </div>
    <div class="card" @contextmenu="rightClick">
      <h4>按钮位置</h4>
      <div class="content">
        <InputNumber :value="1" :controls-outside="true"></InputNumber>
      </div>
    </div>
    <!-- <div class="card" @contextmenu="rightClick">
      <h4>格式化展示</h4>
      <div class="content">
        <InputNumber
          :max="10000"
          :value="1000"
          :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
        ></InputNumber>
        <InputNumber
          :max="100"
          :value="100"
          :formatter="(value) => `${value}%`"
          :parser="(value) => value.replace('%', '')"
        ></InputNumber>
      </div>
    </div> -->

    <Modal v-model="showRightModal" title="确认按钮" :footer-hide="true">
      <Button type="primary" @click="useStyle">使用此样式</Button>
    </Modal>
  </div>
</template>
<script>
// 深度合并
import mergeDeep from '@/utils/mergeDeep'
import mount from '@/components/mount.js'
import { getTemplate } from '@/components/template'
import { InputNumber } from '@/components/data'
export default {
  data() {
    return {
      buttonSize: 'large',
      loading: false,
      loading2: false,
      showRightModal: false, //展示右键面板
      targetNode: null,
      attributes: InputNumber,
    }
  },
  computed: {
    current: {
      //当前选中组件
      get(value) {
        return this.$store.state.currentComponent
      },
    },
  },
  mounted() {
    let nodeArr = document.getElementsByClassName('ivu-input-number')
    for (var i = 0; i < nodeArr.length; i++) {
      nodeArr[i].draggable = true
    }
  },
  methods: {
    useStyle() {},
    toLoading() {
      this.loading = true
    },
    toLoading2() {
      this.loading2 = true
    },
    rightClick(e) {
      //   e.preventDefault()
      //   this.targetNode = e.target
      //   // 获取右键的按钮节点
      //   function getParent(node) {
      //     if (node) {
      //       if (node.nodeName !== 'BUTTON') {
      //         node = getParent(node.parentNode)
      //       } else if (node.parentNode == null) {
      //         node = null
      //       }
      //     }
      //     return node
      //   }
      //   this.targetNode = getParent(this.targetNode)
      //   if (this.targetNode) {
      //     // 暂时去掉右键弹窗模块---别删除---
      //     // this.showRightModal = true
      //     this.attributes.type.value = this.targetNode.__vue__.type
      //   }
    },
    // 模拟拖拽组件
    dragStart(e) {
      // 通过attributes上的key去匹配节点上的key
      Object.keys(this.attributes).forEach((item) => {
        switch (item) {
          case 'label':
            // 文字需要重置属性key
            this.attributes.label.value = e.target.innerText
            break
          case 'controls-outside':
            // 还原controls-outside
            this.attributes['controls-outside'].value = e.target.__vue__.controlsOutside ? true : false
            break
          default:
            this.attributes[item].value = e.target.__vue__[item]
            break
        }
      })
      let componentName = 'InputNumber' // 匹配的是dataName
      let info = {
        name: componentName,
        ui: 'iview-UI',
        open: false, // 组件树是否展开
      }
      //通过e.dataTransfer方法来存储被拖拽组件的信息，这样在ondrop的时候可以获取这个组件
      e.dataTransfer.setData('info', JSON.stringify(info))
      this.updateAttribute(this.attributes)
    },

    // 延迟更新组件，当组件渲染完成后，我们需要手动给它加上设置的样式
    updateAttribute(attr) {
      setTimeout(() => {
        this.$EventBus.$emit('getAttr', attr)
      }, 1000)
    },
    getParentComponent(component) {
      let components = JSON.parse(JSON.stringify(this.$store.state.components))
      if (component.parentId) {
        return this.getParentComponent(components.find((c) => c.info.id === component.parentId))
      } else {
        return component
      }
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  margin: 15px;
  .content {
    padding: 10px;
    margin-left: 20px;
    margin-top: 10px;
    box-shadow: 0 2px 10px 0 #ddd;
  }
  button {
    margin: 5px;
  }
  /deep/.ivu-btn-loading,
  /deep/.ivu-btn.disabled > *,
  /deep/.ivu-btn[disabled] > * {
    // 值为none表示：元素不对指针事件做出反应。
    pointer-events: initial;
  }
}
</style>
